<template>
  <div class="city-group">
    <div class="title">热门</div>
      <keep-alive>
        <div class="list">
          <template v-for="(city, index) in groupData.hotCities" :key="index">
            <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
          </template>
        </div>
      </keep-alive>
      <keep-alive>
        <van-index-bar :sticky="false" :index-list="listTitle">
          <template v-for="(group, index) in groupData.cities" :key="index">
            <van-index-anchor :index="group.group" />
            <template v-for="(city, index) in group.cities" :key="index" >
              <van-cell :title="city.cityName" @click="cityClick(city)"/>
            </template>
          </template>
        </van-index-bar>
      </keep-alive>
        
    <!-- <template v-for="(group, index) in groupData.cities" :key="index">
        <div class="group-item">
          <h2 class="title">标题：{{ group.group }}</h2>
          <div class="list">
            <template v-for="(city, index) in group.cities" :key="index">
              <div class="city">{{ city.cityName }}</div>
            </template>
          </div>
        </div>
      </template> -->
  </div>
</template>

<script setup>
import useCityStore from "@/stores/modules/city";
import { computed } from "@vue/runtime-core";
import { useRouter } from "vue-router";


const props = defineProps({
  groupData: {
    type: Object,
    default:() => ({})
  }
});

//JS 里面拿不到 所以要用创建一个props 来引用
const listTitle = computed(() => props.groupData.cities.map(item => item.group))

const router = useRouter()
const cityStore = useCityStore()
const cityClick = (city) => {
  // console.log(city.cityName)
  cityStore.currentCity.cityName = city.cityName
  router.back()
}
</script>

<style lang="less" scoped>
.list {
  display: flex;
  flex-wrap: wrap;//自动换行
  justify-content: space-around;//左右留白
  padding: 10px;
  padding-right: 25px;
  .city {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 28px;
    background-color: #fff4ec;
    margin: 5px 0;
  }
}

.title {
  font-size: 14px;
  height: 32px;
  padding: 0 16px;
  line-height: 32px;
  color: #000;
}

</style>